<template>
  <div class="">
    <div class="booklist2 row">
      <div class="lists">
        <bookList1
          lwidth="650"
          colNum="4"
          :bookList="bookList"
          :lable="lable"
          v-if="bookList"
        ></bookList1>
      </div>
      <div class="suggest">
        <div class="title row">
          <div class="bookType">店铺推荐</div>
          <div class="more">更多好店</div>
        </div>
        <div class="list">
          <template v-for="item in issuerList">
            <div
              class="issuerList issuerHover"
              @click="goIssuerHome(item.StoreInfo.userId)"
            >
              <div class="name">
                <i class="f1">{{ item.StoreInfo.storeName }}</i>

                <i
                  v-for="(item, index) in item.StoreInfo.starsNum"
                  :key="'star' + index"
                  >⭐
                </i>
              </div>
              <div class="message ra">
                <i class="count"
                  >总完成单数：<i class="db">{{ item.count }}</i></i
                >
                <i class="good" v-if="item.count"
                  >好评：<i class="db"
                    >{{ Math.floor(item.goodNum / item.count) * 100 }}%</i
                  ></i
                >
                <i class="like"
                  >收藏：<i class="db">{{ item.likeNum }}</i></i
                >
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookType: "好书推荐",
      // issuerList: [],
    };
  },
  props: ["bookList", "lable"],
  computed: {
    issuerList: function () {
      return this.$store.state.issuerList.isserList;
    },
  },
  components: {
    bookList1: () => import("./bookList1.vue"),
  },
  methods: {
    getBookList() {
      this.bookList = [];
      this.issuerList = [];
      for (let i = 0; i < 6; i++) {
        this.issuerList.push({
          name: "书屋0",
          userID: 0,
          count: 1000,
          goodNum: 800,
          likeNum: 100,
          url: "",
        });
      }
    },
    goIssuerHome(userId) {
      console.log("userId=", userId);
      this.$router.push({ path: "/issuerHome", query: { userId: userId } });
    },
  },
};
</script>

<style lang="less" scoped>
.booklist2 {
  .lists {
    flex: 2;
  }
  .suggest {
    padding-left: 10px;
    // background: #000;
    flex: 1;
    .title {
      padding: 20px;
      border-bottom: 1px solid lightslategray;
      .bookType {
        font-size: 20px;
        font-weight: 600;
      }
      .more {
        font-size: 16px;
        font-weight: 400;
        color: lightseagreen;
        margin-top: 4px;
        margin-left: 14px;
      }
    }
    .list {
      padding-left: 20px;
      margin-top: 10px;
      border-left: 1px solid lightgrey;
      line-height: 2;
      .issuerHover:hover {
        background: lightblue;
      }
      .issuerList {
        border-radius: 8px 30px;
        background: lightgrey;
      }
      .name {
        margin-top: 20px;
        margin-left: 20px;
        font-size: 16px;
      }
      .f1 {
        font-family: "font1";
      }
      .message {
        font-size: 12px;
        // .count {
        // }
        // .good {
        // }
        // .like {
        // }
        .db {
          color: rgb(233, 120, 120);
        }
      }
    }
  }
}
</style>